<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:p="http://primefaces.prime.com.tr/ui"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core">
    <h:head>
        <title>Listado Cuotas</title>
        <link href="recursos/general.css" rel="stylesheet" type="text/css" />
        <script type="text/javascript">
            function crearComplete(xhr, status, args){               
                if(args.error){
                    msgERR.show();
                }
            }            
            function filtroAutomatico(){
                document.getElementById('form:display:estado_filter').selectedIndex = 1;
                tablaCuotas.filter();
            }
        </script>
    </h:head>
    <h:body onload="filtroAutomatico()">
        <h:form id="form">
            <!--Declaro la variable que pasaré a los bean para reutilizar las pantallas-->
            <f:metadata>
                <f:viewParam name="nuevo" value="#{sesionBean.strVariable}"/>
            </f:metadata>
            <f:phaseListener binding="#{sesionBean.phaseListenerImpl}" type="ongd.web.PhaseListenerImpl"/>

            <!--Nos mostrará el título de la página -->
            <h:outputText value="#{listado_Cuota.titulo}" styleClass="textoTitulo"/>
            
            <!--Tabla que muestra los datos de las cuotas y permitirá modificarlas -->
            <p:dataTable id="display" value="#{listado_Cuota.listaMostrar}" var="cuota" style="margin-top: 10px;"
                         paginatorPosition="bottom" paginator="true" rows="30" widgetVar="tablaCuotas">
                <p:columnGroup type="header">  
                    <p:row>  
                        <p:column colspan="3" headerText="Persona Asociada" />  
                        <p:column colspan="3" headerText="Cuota" />
                        <p:column rowspan="3" headerText="" />
                    </p:row>  
                    <p:row id="filtros">  
                        <p:column headerText="DNI" filterBy="#{cuota.persona.dni}" footerText="contains" filterMatchMode="contains"/>                            
                        <p:column headerText="Nombre" filterBy="#{cuota.persona.nombre}" footerText="contains" filterMatchMode="contains"/>
                        <p:column headerText="Apellidos" filterBy="#{cuota.persona.apellidos}" footerText="contains" filterMatchMode="contains"/>                          
                        <p:column headerText="Fecha de Pago" />
                        <p:column headerText="Cantidad" />                        
                        <p:column id="estado" headerText="Estado" filterBy="#{cuota.estado}" footerText="exact" filterOptions="#{listado_Cuota.estadoOptions}" filterMatchMode="exact"/>  
                    </p:row>  
                </p:columnGroup> 
                <p:column style="width: 10%;">
                    <f:facet name="header">
                        <h:outputText value="Dni"/>
                    </f:facet>
                    <h:outputText value="#{cuota.persona.dni}" />
                </p:column>
                <p:column style="width: 15%;"> 
                     <f:facet name="header">
                        <h:outputText value="Nombre"/>
                    </f:facet>
                    <h:outputText value="#{cuota.persona.nombre}"/>
                </p:column>
                <p:column style="width: 20%;">
                     <f:facet name="header">
                        <h:outputText value="Apellidos"/>
                    </f:facet>
                    <h:outputText value="#{cuota.persona.apellidos}"/>
                </p:column>                
                <p:column style="width: 15%;"> 
                     <f:facet name="header" >
                        <h:outputText value="Fecha de Pago"/>
                    </f:facet>
                    <h:outputText value="#{cuota.fechaPago}">
                        <f:convertDateTime pattern="dd/MM/yyyy" timeZone="GMT+1"/>
                    </h:outputText>
                </p:column>
                <p:column style="width: 15%;"> 
                    <f:facet name="header">
                        <h:outputText value="Cantidad"/>
                    </f:facet>
                    <h:outputText value="#{cuota.cantidad}">
                        <f:convertNumber pattern="0.00"/>
                    </h:outputText>
                </p:column>
                <p:column style="width: 20%;">
                    <f:facet name="header">
                        <h:outputText value="Estado"/>
                    </f:facet>
                    <h:outputText value="#{cuota.estado}"/>
                </p:column>
                <p:column style="width:5%">  
                    <p:rowToggler />  
                </p:column>
                <p:rowExpansion>  
                    <h:panelGrid id="display1" columns="3" cellpadding="4" style="width:330px; margin-left: 200px;">  
                        <p:commandButton value="Pendiente" disabled="#{cuota.estado=='Pendiente'}" oncomplete="crearComplete(xhr, status, args)"
                                         action="#{listado_Cuota.modificarPendiente}" ajax="false" styleClass="botonNormal">
                            <f:setPropertyActionListener value="#{cuota.cuotaPK}" target="#{listado_Cuota.cuotaPK}" />
                        </p:commandButton>
                        <p:commandButton value="Abonada" disabled="#{cuota.estado=='Abonada'}" 
                                         action="#{listado_Cuota.modificarAbonada}" ajax="false" styleClass="botonNormal">
                            <f:setPropertyActionListener value="#{cuota.cuotaPK}" target="#{listado_Cuota.cuotaPK}" />
                        </p:commandButton>
                        <p:commandButton value="Cancelada" disabled="#{cuota.estado=='Cancelada'}" 
                                         action="#{listado_Cuota.modificarCancelada}" ajax="false" styleClass="botonNormal">
                            <f:setPropertyActionListener value="#{cuota.cuotaPK}" target="#{listado_Cuota.cuotaPK}" />
                        </p:commandButton>
                    </h:panelGrid>  
                </p:rowExpansion>
            </p:dataTable>
            
            <p:commandButton value="Exportar" styleClass="botonGrande" style="margin-top: 10px;" onclick="exportarDialog.show();"/>
            <p:dialog widgetVar="exportarDialog" header="Exportar datos" styleClass="dialogoNormal" modal="true" resizable="false" width="180">
            <!--Panel que permite exportar el contenido de la tabla a pdf o xls -->
            <h:panelGrid columns="2">
                <h:commandLink  onclick="exportarDialog.hide();">
                    <p:graphicImage value="/imagenes/pdf.jpg" height="80px" width="60px"/>  
                    <p:dataExporter type="pdf" target="display" fileName="Listado_Cuotas" excludeColumns="6,7,8" />
                </h:commandLink>
               <h:commandLink>
                    <p:graphicImage value="/imagenes/xls.jpg" height="90px" width="90px"/>
                    <p:dataExporter type="xls" target="display" fileName="Listado_Cuotas" excludeColumns="6,7,8"/>
               </h:commandLink>
            </h:panelGrid>
            </p:dialog>
            <!--Mensaje de confirmación que indicará que la cuota no se ha podido modificar -->
            <p:confirmDialog message="No se ha podido realizar la modificación." severity="info" widgetVar="msgERR" modal="true"/>
        </h:form>
    </h:body>
</html>